<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:t="http://java.sun.com/jsp/jstl/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="/WEB-INF/template/main-template.xhtml">

    <ui:define name="metadata">
        <f:metadata>
            <f:viewParam name="page" value="#{pageBean.selectedIndex}" />
            <f:event type="preRenderView" listener="#{pageBean.pageInit}" />
        </f:metadata>
    </ui:define>

    <ui:define name="header">
       <h1>#{applicationState.applicationName}</h1>
    </ui:define>

    <ui:define name="titles">
        <h:form>
            <p:menu style="width: 100%" >
                <t:forEach items="#{pageBean.pages}" var="page" varStatus="index">
                    <p:menuitem value="#{page.title}" styleClass="#{index.index == pageBean.selectedIndex ? 'selected-menuitem' : ''}"
                                outcome="page" >
                        <f:param name="page" value="#{index.index}" />
                    </p:menuitem>
                </t:forEach>
            </p:menu>
        </h:form>
    </ui:define>

    <ui:define name="content">
        <h:outputText value="#{pageBean.selectedPage.pageDetails.description}" escape="false" />
    </ui:define>

</ui:composition>